<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>土豆书库</title>
		 
		<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
			<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
			<link href="css/bookstore.css" rel="stylesheet" type="text/css"/>
			<link href="css/index.css" rel="stylesheet" type="text/css"/>

		<style>
			.user-logout{
				color: #222222;
			}
			.user-logout:hover{
				color: orange;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="index.html">首页</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookstore.html">书库</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookshelf.html">书架</a>
							 
						</div>
						<div class="right-shouye">
							<a href="ranking.html">排行榜</a>
							 
						</div>
						<div class="right-search">
							<input placeholder="请输入书名或作者名" v-model="selectneirou">
							<img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />

						</div>
						<div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						<div class="right-user">
							<a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
							<a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
							<div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
								<el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
								<span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
							</div>
							<div v-if="isLogged" style="display: flex; align-items: center;">
								<span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							</div>

						</div>
						 
						 
						 
						 
						 
					</div>
				</div>
			</div>
			<div class="bookstore">
				<div class="bookstore-lib">
					<div class="lib-panel">
						<div class="panel-title">
							<div class="condition-title">读者：</div>
							<div> 
								<el-radio-group v-model="radio1" @input="Jump1" fill=" rgba(250,103,37,.1)" size="mini" text-color="#fa6725"     >
									  <el-radio-button label="全部"   style="margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px;"  ></el-radio-button>
									  <el-radio-button label="男频"   style="margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px;"></el-radio-button>
									  <el-radio-button label="女频" style="margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px; "></el-radio-button>
									   
								</el-radio-group>
							</div>
						</div>
						
						<div class="panel-title">
							<div class="condition-title">分类：</div>
							<div> 
								<el-radio-group v-model="radio2" @input="Jump2"   fill=" rgba(250,103,37,.1)" size="mini" text-color="#fa6725"     >
									  <el-radio-button label="全部"   style=" margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px;"    ></el-radio-button>
									  <el-radio-button  v-for="c in category" :label="c.categoryName"   style="margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px;"></el-radio-button>

									 										 										 										 								 
								</el-radio-group>
							</div>
						</div>
						<div class="panel-title">
							<div class="condition-title">状态：</div>
							<div> 
								<el-radio-group v-model="radio3" @input="Jump3"  fill=" rgba(250,103,37,.1)" size="mini" text-color="#fa6725"     >
									  <el-radio-button label="全部"   style="    margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px;"  ></el-radio-button>
									  <el-radio-button label="连载中"   style="margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px;"></el-radio-button>
									  <el-radio-button label="已完结" style="margin-right: 28px;padding: 0 10px;line-height: 24px;border-radius: 12px; "></el-radio-button>
									   
								</el-radio-group>
							</div>
						</div>
						 
					 
						
					</div>
					<div class="lib-wapper">
						<h2 class="muye-home-block-title muye-home-top-rank-title">土豆精选</h2>
						
					</div>
					<div class="lib-list">
						<el-row>
						  <el-col :span="5" v-for=" n in novel"  style="margin-left: 4%;margin-top: 3%;"   >
						    <el-card :body-style="{ padding: '0px' }">
								 <div class="list-li">
								 	<div style="width: 120px;height: 100%;float: left;"><img :src="n.coverImage" style="width: 100%;height: 100%;"  /></div>
									<div class="list-li-wenzi">
										<div  style=" width: 100%;height: 30px;"><a :href="'novel.html#'+n.novelId" >{{n.title}}</a></div>
								 		<div class="book-item-desc">
											<span>作者：<span class="font-fKts9tCXDjS49UhH">{{n.authorName}}</span></span>
										</div>
										<div class="book-item-desc">
											<span v-if="n.statu == 1">连载中</span>
											<span v-else-if="n.statu == 0">已完结</span>
										</div>
										<div class=" book-item-abstract">
											{{n.introduction}}
										</div>
								 		
								 	</div>
								 </div>
								 
								
							</el-card>
						  </el-col>
						</el-row>
					</div>
					
					
				</div>
				
				
			</div>
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
	</body>
	
	
	<script>
	 
	 
	
	var v = new Vue({
		el : "#app",
		data() {
			  
			 return {
				  radio1: '全部',
				 radio2: '全部',
				 radio3: '全部',
				 title: '三国演义',
				 
				  isSticky: false,
				 isLogged: false,
				 novel:[{
					 novelId: '',
					 authorId: '',
					 categoryId: '',
					 coverImage: '',
					 title: '',
					 statu: '',
					 introduction: '',
					 authorName: '',
					 categoryName: '',
				 }],
				 selectnovel: {
					  sex: '',
					 categoryId: '',
					 statu: '',
				 },
				 category: [{
					  categoryId: '',
					  categoryName: '',
				 }],
				 user:{
					 userId: '',
					 username: '',
					 avatar: '',
				 },
				 selectneirou: '',

				};
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			this.selectlist();
			this.selectcategory();
			this.iflogin();
		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},
			selectlist(){
				axios.post('/other/novel/selectlist',this.selectnovel).then(res => {
					this.novel = res.data.news;
				});
			},
			Jump1(){
				if(this.radio1 == '全部'){
					this.selectnovel.sex = '';
				}
				else if(this.radio1 == '男频'){
					this.selectnovel.sex = 1;

				}
				else if(this.radio1 == '女频'){
					this.selectnovel.sex = 0;
				}
				this.selectlist();

			},
			Jump2(){
				if(this.radio2 == '全部'){
					this.selectnovel.categoryId = '';
				}
				else{
					this.category.forEach(item => {
						if (item.categoryName == this.radio2) {
							this.selectnovel.categoryId = item.categoryId;

						}
					});
				}

				this.selectlist();


			},
			Jump3(){
				if(this.radio3 == '全部'){
					this.selectnovel.statu = '';
				}
				else if(this.radio3 == '连载中'){

					this.selectnovel.statu = 1;
				}

				else if(this.radio3 == '已完结'){

					this.selectnovel.statu = 0;
				}

				this.selectlist();

			},
			iflogin(){
				axios.get('/user/iflogin').then(res=>{

					if(res.data != ""){
						this.user.userId = res.data;

						axios.get('/user/getUser?userId='+this.user.userId).then(res=>{
							this.user = res.data;
						});
						this.isLogged =  true;
					}


				});

			},
			logout(){
				axios.post('/user/logout').then(res=>{
					this.isLogged = false;
					this.iflogin();
					window.location.href = "index.html";
				});

			},
			selectcategory(){
				axios.post('/houtai/category/select').then(res => {
					this.category = res.data;

				});
			},
			// 搜索
			select(){
				axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
					if(res.data == "ok"){
						window.location.href = "select.html"
					}

				});

			},
			geren(){
				window.location.href = "user.html"
			},



		}
		 
		 
		 
	})
	 
	</script>
</html>
